{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/object.keys90__object.assign/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"08944bda-4e10-58d4-9084-2d032927a7e6","excerpt":"Object.keys()  메서드는 개체 고유 속성의 이름을 배열로 반환합니다. 배열 순서는 일반 반복문을 사용할 때와 같습니다. Object.assign (MDN) Object.assign…","html":"<h1 id=\"objectkeys\" style=\"position:relative;\"><a href=\"#objectkeys\" aria-label=\"objectkeys permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Object.keys()</h1>\n<p><code class=\"language-text\">Object.keys()</code> 메서드는 개체 고유 속성의 이름을 배열로 반환합니다. 배열 순서는 일반 반복문을 사용할 때와 같습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">const</span> object1 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  a<span class=\"token operator\">:</span> <span class=\"token string\">'somestring'</span><span class=\"token punctuation\">,</span>\n  b<span class=\"token operator\">:</span> <span class=\"token number\">42</span><span class=\"token punctuation\">,</span>\n  c<span class=\"token operator\">:</span> <span class=\"token boolean\">false</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token builtin\">console</span><span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>Object<span class=\"token punctuation\">.</span><span class=\"token function\">keys</span><span class=\"token punctuation\">(</span>object1<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// expected output: Array [\"a\", \"b\", \"c\"]</span></code></pre></div>\n<h1 id=\"objectassign-mdn\" style=\"position:relative;\"><a href=\"#objectassign-mdn\" aria-label=\"objectassign mdn permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Object.assign (<a href=\"https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign\">MDN</a>)</h1>\n<p>Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">const</span> target <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> a<span class=\"token operator\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> b<span class=\"token operator\">:</span> <span class=\"token number\">2</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> source <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> b<span class=\"token operator\">:</span> <span class=\"token number\">4</span><span class=\"token punctuation\">,</span> c<span class=\"token operator\">:</span> <span class=\"token number\">5</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> returnedTarget <span class=\"token operator\">=</span> Object<span class=\"token punctuation\">.</span><span class=\"token function\">assign</span><span class=\"token punctuation\">(</span>target<span class=\"token punctuation\">,</span> source<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token builtin\">console</span><span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>target<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// expected output: Object { a: 1, b: 4, c: 5 }</span>\n\n<span class=\"token builtin\">console</span><span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>returnedTarget<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// expected output: Object { a: 1, b: 4, c: 5 }</span></code></pre></div>\n<p>동일한 키가 존재할 경우 대상 객체의 속성은 출처 객체의 속성으로 덮어쓰여집니다. 후에 출처의 속성은 이전의 출처의 속성과 유사하게 덮어씁니다.</p>\n<p><code class=\"language-text\">Object.assign()</code> 메소드는 열거할 수 있는 출처 객체의 속성만 대상 객체로 복사합니다. 이 메소드는 출처 객체의 <code class=\"language-text\">[[Get]]</code>, 대상 객체의 <code class=\"language-text\">[[Set]]</code> 을 사용하여 getter 와 setter 를 호출합니다. 따라서 이는 속성을 단순히 복사하거나 새롭게 정의하는 것이 아니라 할당하는 것입니다. 병합 출처가 getter 를 포함하는 경우 프로토타입으로 새로운 속성을 병합하는 것이 적절하지 않을 수 있습니다. 프로토타입으로 속성의 열거성을 포함한 속성의 정의를 복사하려면 대신 <code class=\"language-text\">[Object.getOwnPropertyDescriptor()]()</code> 와 <code class=\"language-text\">[Object.defineProperty()]()</code> 를 사용해야합니다.</p>\n<p><code class=\"language-text\">[String]()</code> 과 <code class=\"language-text\">[Symbol]()</code> 속성 모두가 복사됩니다.</p>\n<p>에러가 발생할 수 있는 상황에서는(예, 프로퍼티가 쓰기 불가인 경우), <code class=\"language-text\">[TypeError]()</code> 가 발생하며, 에러가 발생하기 전에 속성이 추가되었다면 <code class=\"language-text\">target</code> 객체는 변경될 수 있습니다.</p>\n<p><code class=\"language-text\">Object.assign()</code> 메소드는 <code class=\"language-text\">[null]()</code> 또는 <code class=\"language-text\">[undefined]()</code> 출처 값에 대해서는 오류를 던지지 않음을 유의하세요.</p>\n<h1 id=\"how-would-i-implement-a-filter-for-objects-in-javascript\" style=\"position:relative;\"><a href=\"#how-would-i-implement-a-filter-for-objects-in-javascript\" aria-label=\"how would i implement a filter for objects in javascript permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://stackoverflow.com/questions/5072136/javascript-filter-for-objects\">How would I implement a filter() for Objects in JavaScript?</a></h1>\n<ul>\n<li>\n<p><a href=\"https://stackoverflow.com/questions/5072136/javascript-filter-for-objects\">How would I implement a filter() for Objects in JavaScript?</a></p>\n<ul>\n<li><a href=\"https://overflowjs.com/posts/Map-Reduce-Filter-In-Javascript.html\">4. ARMD —Delete some key’s from object</a></li>\n</ul>\n<p>With reduce and Object.keys to implement the desired filter (using ES6 arrow syntax):</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">//1 delete\nconst newUsers = users.map(u => Object.keys(u)\n\t\t\t\t\t\t\t\t\t.reduce((newObj, key) => \n\t\t\t\t\t\t\t\t\t\tkey != 'website' ?\n\t\t\t\t\t\t\t\t\t\t{ ...newObj, [key]: u[key] } :\n\t\t\t\t\t\t\t\t\t\tnewObj, {}));\n\n//2 include, filter\nconst raw = {\n  item1: { key: 'sdfd', value:'sdfd' },\n  item2: { key: 'sdfd', value:'sdfd' },\n  item3: { key: 'sdfd', value:'sdfd' }\n};\n\nconst allowed = ['item1', 'item3'];\n\nconst filtered = Object.keys(raw)\n  .filter(key => allowed.includes(key))\n  .reduce((obj, key) => {\n    obj[key] = raw[key];\n    return obj;\n  }, {});\n\nconsole.log(filtered);</code></pre></div>\n<ul>\n<li><strong>As (1), in combination with Object.assign</strong></li>\n</ul>\n<p>In the above solution the comma operator is used in the reduce part to return the mutated res object. This could of course be written as two statements instead of one expression, but the latter is more concise. To do it without the comma operator, you could use Object.assign instead, which does return the mutated object:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">Object.filter = (obj, predicate) => \n    Object.keys(obj)\n          .filter( key => predicate(obj[key]) )\n          .reduce( (res, key) => Object.assign(res, { [key]: obj[key] }), {} );\n\n// Example use:\nvar scores = {\n    John: 2, Sarah: 3, Janet: 1\n};\nvar filtered = Object.filter(scores, score => score > 1); \nconsole.log(filtered);</code></pre></div>\n<ul>\n<li><strong>Using map and spread syntax instead of reduce</strong></li>\n</ul>\n<p>Here we move the Object.assign call out of the loop, so it is only made once, and pass it the individual keys as separate arguments (using the spread syntax):</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">Object.filter = (obj, predicate) => \n    Object.assign(...Object.keys(obj)\n                    .filter( key => predicate(obj[key]) )\n                    .map( key => ({ [key]: obj[key] }) ) );\n\n// Example use:\nvar scores = {\n    John: 2, Sarah: 3, Janet: 1\n};\nvar filtered = Object.filter(scores, score => score > 1); \nconsole.log(filtered);</code></pre></div>\n<ul>\n<li><strong>Using Object.entries and Object.fromEntries</strong></li>\n</ul>\n<p>As the solution translates the object to an intermediate array and then converts that back to a plain object, it would be useful to make use of <code class=\"language-text\">[Object.entries]()</code> (ES2017) and the opposite (i.e. <a href=\"https://stackoverflow.com/a/43682482/5459839\">create an object from an array of key/value pairs</a>) with <code class=\"language-text\">[Object.fromEntries]()</code> (ES2019).</p>\n<p>It leads to this “one-liner” method on <code class=\"language-text\">Object</code>:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">Object.filter = (obj, predicate) => \n                  Object.fromEntries(Object.entries(obj).filter(predicate));\n\n// Example use:\nvar scores = {\n    John: 2, Sarah: 3, Janet: 1\n};\n\nvar filtered = Object.filter(scores, ([name, score]) => score > 1); \nconsole.log(filtered);</code></pre></div>\n</li>\n</ul>","frontmatter":{"title":"object.keys90 / object.assign","date":"November 12, 2019"}}},"pageContext":{"slug":"/Today I Learned/object.keys90__object.assign/","previous":{"fields":{"slug":"/Today I Learned/EventEmitter/"},"frontmatter":{"title":"EventEmitter","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/form_data/"},"frontmatter":{"title":"form data","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}